<template>
  <div>
    <a-table 
      :pagination="isPagination" 
      bordered 
      :columns="columns" 
      :data-source="newTableArr" 
      :rowKey="(record) => record.key"
      :selectedRows.sync="selectedRows"
      :row-selection="isShowCheckBox ? { selectedRowKeys: selectedRowKeys, onChange: onSelectChange } : null"
      :components="draggerComponents">
      <template slot-scope="text, record, index" :slot="slot" v-for="slot in Object.keys($scopedSlots)">
        <slot :name="slot" v-bind="{text, record, index}"></slot>
      </template>
      <template v-for="item in columns" :slot="item.dataIndex" slot-scope="text">
        <span class="tableCellOverflow" :key="item.id" :style="{width: item.width ? item.width+'px' : '200px'}">
          <a-tooltip placement="topLeft" :title="text">
            <a v-if="item.dataIndex=='note'">{{text}}</a>
            <span v-else>{{text}}</span>
          </a-tooltip>
        </span>
      </template>
      <!-- 筛选 -->
      <template
          slot="filterDropdown"
          slot-scope="{
            setSelectedKeys,
            selectedKeys,
            confirm,
            clearFilters,
            column,
          }"
        >
          <div class="filterItem">
            <div class="topItem">
              <div class="itemTitle">快捷操作</div>
              <ul>
                <li @click="sortData(column, 'upchange')">
                  <a-icon type="bars"/>
                  升序排列
                </li>
                <li @click="sortData(column, 'downchange')">
                  <a-icon type="bars"/>
                  降序排列
                </li>
              </ul>
            </div>
            <div class="botItem">
              <div class="itemTitle">
                <span class="right">筛选条件</span>
                <span class="left"
                      @click="clearSelect([], selectedKeys, confirm, column, setSelectedKeys, clearFilters)">清空</span>
              </div>
              <!-- select下拉框 multiple :default-value-->
              <div class="selectItem" v-if="column.fieldType === 'Select'">
                <div class="title">{{ column.title }}选择</div>
                <!-- 根据接口返回fieldValue -->
                <div class="selectContent" v-if="column.name === 'healthstatus'">
                  <a-select
                    mode="multiple"
                    v-model="column.selectValue"
                    placeholder="请选择"
                    style="width: 100%"
                    @change="
                      (value) =>
                        handleSelect(
                          value,
                          selectedKeys,
                          confirm,
                          column,
                          setSelectedKeys
                        )
                    "
                  >
                    <a-select-option
                      v-for="(item, index) in selectData"
                      :key="index"
                      :value="item.name"
                    >
                      {{ item.value }}
                    </a-select-option>
                  </a-select>
                </div>
                <div class="selectContent" v-else>
                  <a-select
                    mode="multiple"
                    v-model="column.selectValue"
                    placeholder="请选择"
                    style="width: 100%"
                    @change="
                      (value) =>
                        handleSelect(
                          value,
                          selectedKeys,
                          confirm,
                          column,
                          setSelectedKeys
                        )
                    "
                  >
                    <a-select-option
                      v-for="(item, index) in selectData"
                      :key="index"
                      :value="item"
                    >
                      {{ item }}
                    </a-select-option>
                  </a-select>
                </div>
              </div>
              <!-- input搜索框 -->
              <div class="selectItem" v-else-if="column.fieldType === 'Input' && column.dataType === 'String'">
                <div class="title">{{ column.title }}查询</div>
                <div class="inputContent">
                  <a-input-search
                    placeholder="请输入"
                    v-model="column.InputValue"
                    @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
                    @search="() => inputSearch(selectedKeys, confirm, column, setSelectedKeys)"
                    @pressEnter="() => inputSearch(selectedKeys, confirm, column, setSelectedKeys)"
                  />
                </div>
              </div>
              <!-- input搜索框 -->
              <div class="selectItem"
                   v-else-if="column.fieldType === 'Input' && (column.dataType.indexOf('Number') != -1)">
                <div class="title">{{ column.title }}查询</div>
                <div class="inputContent">
                  <a-input-search
                    placeholder="请输入"
                    v-model="column.InputValue"
                    @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
                    @search="() => inputSearch(selectedKeys, confirm, column, setSelectedKeys)"
                    @pressEnter="() => inputSearch(selectedKeys, confirm, column, setSelectedKeys)"
                  />
                </div>
              </div>
              <!-- 时间框 -->
              <div class="selectItem" v-else-if="column.fieldType === 'Date' || column.fieldType === 'Date_Time'">
                <div class="title">{{ column.title }}查询</div>
                <div class="inputContent">
                  <a-range-picker v-model="column.DateValue"
                                  @change="(date) => timeSelect( date, selectedKeys, confirm, column, setSelectedKeys) "/>
                </div>
              </div>
            </div>
          </div>
        </template>
    </a-table>
  </div>
</template>

<script >
  // import tableDragResize from '@/mixins/draggerTable'
  import { draggerTable } from '@/mixins/draggerTable'
  export default {
    // mixins: [tableDragResize],
    mixins: [draggerTable],
    props: {
      isPagination: {
        type: Boolean,
        default: true
      },
      isShowCheckBox: {
        type: Boolean,
        default: true
      },
      columns: {
        type: Array,
        default: () => { return [] }
      },
      dataSource: {
        type: Array,
        default: () => { return [] }
      },
    },
    data() {
      return {
        selectedRowKeys:[],
        selectedRows:[],
        newTableArr:[],
      }
    },
    watch: {
      dataSource(val) {
        this.newTableArr = val
        this.selectedRowKeys = []
      },
    },
    mounted(){
      this.newTableArr = this.dataSource
    },
    methods: {
      // 复选框选择事件
      onSelectChange(selectedRowKeys,selectedRows) {
        this.selectedRowKeys = selectedRowKeys;
        this.selectedRows = selectedRows;
        this.$emit('onSelectChange',selectedRowKeys,selectedRows)
      },
      // 表头下拉框选择
      handleSelect(value, selectedKeys, confirm, column, setSelectedKeys) {
        if (column.fieldType === 'Input') {
          this.$set(value, column.title, value[0])
        } else {
          this.$set(value, column.title, value)
        }
        if (setSelectedKeys) {
          setSelectedKeys(value)
        }
        confirm();
      },
      // 搜索框查询
      inputSearch(selectedKeys, confirm, column) {
        if(selectedKeys.length && selectedKeys[0]){
          column.InputValue = selectedKeys[0]
          let arr = this.deepClone(this.newTableArr)
          this.newTableArr = arr.filter(item=>{
            let str = JSON.stringify(item)
            return str.indexOf(selectedKeys[0])!=-1
          })
        }
        confirm();
      },
      timeSelect(date, selectedKeys, confirm, column) {
        let timeArr = []
        if (date.length > 0) {
          timeArr = [new Date(date[0].format('YYYY-MM-DD')).getTime(), new Date(date[1].format('YYYY-MM-DD')).getTime()]
        } else {
          timeArr = []
        }
        let arr = this.deepClone(this.newTableArr)
        this.newTableArr = arr.filter(item=>{
          let str = new Date(item[column.dataIndex]).getTime()
          return str >= timeArr[0] && str <= timeArr[1]
        })
        confirm()
      },
      clearSelect(){
        this.newTableArr = this.deepClone(this.dataSource)
      },
      // 升序&降序
      sortData(col, sortType) {
        if (col.dataType === 'String') {
          this.textSort(this.newTableArr, col.dataIndex, sortType)
        } else if (col.dataType === 'Date' || col.dataType.indexOf('Date') != -1) {
          this.timeSort(this.newTableArr, col.dataIndex, sortType)
        } else if (col.dataType.indexOf('Number') != -1) {
          this.numSort(this.newTableArr, col.dataIndex, sortType)
        }
      },
      // 数值排序
      numSort(arr, property, sortType) {
        arr.sort(function (a, b) {
          let aInfo = a[property] ? a[property] : 0
          let bInfo = b[property] ? b[property] : 0
          if (sortType === 'upchange') {
            return aInfo - bInfo
          } else {
            return bInfo - aInfo
          }
        })
      },
      // 中文排序
      textSort(arr, property, sortType) {
        arr.sort(function (a, b) {
          let aInfo = a[property] ? a[property] : ''
          let bInfo = b[property] ? b[property] : ''
          if (sortType === 'upchange') {
            return aInfo.localeCompare(bInfo, 'zh')
          } else {
            return bInfo.localeCompare(aInfo, 'zh')
          }
        })
      },
      // 时间排序
      timeSort(arr, property, sortType) {
        arr.sort(function (a, b) {
          let aInfo = a[property] ? a[property] : ''
          let bInfo = b[property] ? b[property] : ''
          if (sortType === 'upchange') {
            return aInfo > bInfo ? 1 : -1
          } else {
            return aInfo < bInfo ? 1 : -1
          }
        })
      },
    },
  }
</script>

<style lang="less">
.tableCellOverflow{
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/deep/.table-draggable-handle {
  border:1px solid red;
  height: 100% !important;
  left: auto !important;
  right: -5px;
  cursor: col-resize;
  touch-action: none;
  border: none;
  position: absolute;
  transform: none !important;
  bottom: 0;
}
/deep/.resize-table-th {
  position: relative;
}
.filterItem {
  width: 260px;
  padding: 12px 0px;
  text-align: left;
  .topItem {
    border-bottom: 1px solid #eee;
    padding: 0px 12px;
    .itemTitle {
      color: #999999;
      font-size: 14px;
      margin: 6px 0px;
    }
    ul {
      li {
        list-style: none;
        color: #333333;
        font-size: 14px;
        margin: 6px 0px;
        cursor: pointer;
      }
    }
    ul li:hover {
      color: #386bd7;
    }
  }
  .botItem {
    padding: 0px 12px;
    .itemTitle {
      margin: 6px 0px;
      display: flex;
      justify-content: space-between;
      .right {
        font-size: 14px;
        color: #999999;
      }
      .left {
        font-size: 12px;
        color: #386bd7;
        cursor: pointer;
      }
    }
    .selectItem {
      .title {
        color: #333333;
        font-size: 14px;
        margin: 4px 0px;
      }
    }
  }
}
</style>